<script setup lang="ts">
import C1Scroll from '@/pages/hardware/c1-scroll'
import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'

import { getData } from '@/api/hardware'
import Assemble from './assemble'
import { ref, reactive, nextTick, defineProps } from 'vue'
import useShare from '@/mixins/share'
import { shareUtils } from '@/utils/share'

const {getShareCover} = useShare()
const tabs = ref([])
const active_id = ref(null)
const active_index = ref(0)
const do_search = ref(false)

let queryWrapper = reactive({

  level_one_category_id: '',
  level_two_category_id: '',
  level_three_category_id: '',
  pageSize: 10,
  pageNumber: 1,
  keyword: '',
  level_one_category_title: '',
  level_two_category_title: '',
  level_three_category_title: '',
})

const handleSearch = () => {

  do_search.value = true
}
onLoad((options) => {

  // debugger

  queryWrapper.level_one_category_id = options.level_one_category_id ?? ''
  queryWrapper.level_two_category_id = options.level_two_category_id ?? ''
  queryWrapper.level_three_category_id = options.level_three_category_id ?? ''
  queryWrapper.keyword = options.keyword ?? ''


  getData().then(res => {
    // let active_index = null
    tabs.value = res.data.map((el, index) => {

      if (el.id == options.level_one_category_id) {
        active_index.value = index
        queryWrapper.level_one_category_title = el.title
      }
      return {
        id: '' + el.id,
        title: el.title
      }
    })

    nextTick(() => {
      active_id.value = options.level_one_category_id

    })
  })
})

const resetLevels = ()=>{
  queryWrapper.level_two_category_id = ''
  queryWrapper.level_two_category_title = ''
  queryWrapper.level_three_category_id = ''
  queryWrapper.level_three_category_title = ''
}


const handleTapC1 = (item) => {

  active_id.value = item.id
  queryWrapper.level_one_category_title = item.title
  queryWrapper.level_one_category_id = item.id

  
  resetLevels()

  tabs.value.forEach((el, index) => {
    if (el.id == item.id) {
      active_index.value = index
    }
  })
}


onShareTimeline(() => {
  const page = getCurrentPages().pop()

  const path: string = page.route


  const kws = []

  let title = []

  if (queryWrapper.level_one_category_title != '') {
    title.push(queryWrapper.level_one_category_title)
  }
  if (queryWrapper.level_two_category_title != '') {
    title.push(queryWrapper.level_two_category_title)
  }
  if (queryWrapper.level_three_category_title != '') {
    title.push(queryWrapper.level_three_category_title)
  }


  kws.push(`level_one_category_id=${queryWrapper.level_one_category_id}`)

  kws.push(`level_two_category_id=${queryWrapper.level_two_category_id}`)
  kws.push(`level_three_category_id=${queryWrapper.level_three_category_id}`)
  kws.push(`keyword=${queryWrapper.keyword}`)

  const share_path = `${path}?${kws.join('&')}`

  const promise = new Promise(resolve => {
      getShareCover(path,pop_up_title.value,share_cover.value).then(res => {
          // debugger
          res.path = shareUtils.buildPathQuery(share_path)
          resolve(res)
      })

  })
  
  return {
    title: title.length > 0 ? title.join('#') : '会一美装板',
    path: shareUtils.buildPathQuery(path),
    promise
  }
  
})

onShareAppMessage(() => {

  const page = getCurrentPages().pop()

 
  const path: string = page.route
  const fullPath = page.$page.fullPath
  

  const kws = []

  let title = []

  if (queryWrapper.level_one_category_title != '') {
    title.push(queryWrapper.level_one_category_title)
  }
  if (queryWrapper.level_two_category_title != '') {
    title.push(queryWrapper.level_two_category_title)
  }
  if (queryWrapper.level_three_category_title != '') {
    title.push(queryWrapper.level_three_category_title)
  }


  kws.push(`level_one_category_id=${queryWrapper.level_one_category_id}`)

  kws.push(`level_two_category_id=${queryWrapper.level_two_category_id}`)
  kws.push(`level_three_category_id=${queryWrapper.level_three_category_id}`)
  kws.push(`keyword=${queryWrapper.keyword}`)

  const share_path = `${path}?${kws.join('&')}`

  const promise = new Promise(resolve => {
    debugger
      getShareCover(fullPath,null,null).then(res => {
          // debugger
          res.path = shareUtils.buildPathQuery(share_path)
          resolve(res)
      })

  })

  return {
    title: title.length > 0 ? title.join('#') : '会一美装板',
    path: shareUtils.buildPathQuery(path),
    promise
  }
})

const handleDoSearchDone = () => {

  do_search.value = false
}


const handleTabChange = (e) => {

  const { current } = e.detail

  active_id.value = tabs.value[current].id
  active_index.value = current
  queryWrapper.level_one_category_id = tabs.value[current].id
  queryWrapper.level_one_category_title = tabs.value[current].title

  resetLevels()

}

const handleUpdateQuery = (e) => {
  queryWrapper.level_one_category_id = e.level_one_category_id
  queryWrapper.level_two_category_id = e.level_two_category_id
  queryWrapper.level_three_category_id = e.level_three_category_id
  // queryWrapper.level_one_category_title = e.level_one_category_title
  queryWrapper.level_two_category_title = e.level_two_category_title
  queryWrapper.level_three_category_title = e.level_three_category_title
}



</script>

<template>
  <view class="flex-container">
    <ForOneHeader :enableBack="true" />
    <view class="search-container">

      <view>
        <C1Scroll :c3List="tabs" :active_id="active_id" @handleTap="handleTapC1" />
      </view>
      <view class="input-container">
        <u-search height="70rpx" :showAction="false" :clearabled="true" placeholder="请输入产品名称/型号" @search="handleSearch"
          v-model="queryWrapper.keyword"></u-search>
      </view>



      
      <swiper class="swiper-height" :current="active_index" @change="handleTabChange">
        <swiper-item v-for="item, index in tabs" :key="index">
          <Assemble @doSearchDone="handleDoSearchDone" @updateQuery="handleUpdateQuery" :id="item.id"
            :active_id="active_id" :_options="queryWrapper" :do_search="do_search" />
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import '@/pages/hardware/common.scss';
.flex-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

// $container-height: cala(100vh - )

.search-container {
  flex: 1;
  // overflow: hidden;
  // height: 100vh;
  display: flex;
  flex-direction: column;

  .input-container {
    padding: 0 10rpx;
    // box-shadow: 0 0 10rpx #333;
    // margin-bottom: 15rpx;
  }


}

.mid-c2-scroll {
  width: 180rpx;
}
</style>
